
<template>
	<div class="bussService">
			<!-- 业务分析
			//分页器  -->
			 <el-pagination
					v-model:current-page="currentPage4"
					v-model:page-size="pageSize4"
					:page-sizes="[100, 200, 300, 400]"
					:small="small"
					:disabled="disabled"
					:background="background"
					layout="prev,pager,next,jumper,slot"
					next-text="下一页"
					prev-text="上一页"
					:total="400"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
	>
			<div>页</div>
	</el-pagination>
	<!-- 面包屑 -->
	<el-breadcrumb separator="/">
	<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
	<el-breadcrumb-item
	><a href="/">promotion management</a></el-breadcrumb-item
	>
	<el-breadcrumb-item>promotion list</el-breadcrumb-item>
	<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
<!-- 表格 -->
	<div>
		<!-- 表格隔行变色 -->
		<el-table :data="tableData"  style="width: 100%" :header-cell-style="getRowClass" :row-class-name='tableRowClassName'>
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="userName" label="用户名" width="180" />
        <el-table-column prop="password" label="密码" />
        <el-table-column prop="realName" label="真实姓名" />
        <el-table-column prop="department" label="所属部门" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="role" label="角色" />
        <el-table-column label="操作">
          <template #default="scope">
          <div class="btn_com" @click="detailShow(scope.row)">
            <el-icon size="middle" color="blue">
            <Warning />
          </el-icon>
            详情
          </div>
          <span class="line_btn"></span>
          <div class="btn_com"  @click="dialogEdit(scope.row)">
            <el-icon size="middle" color="green">
            <Edit />
          </el-icon>
            编辑
          </div>
            <span class="line_btn"></span>
          <div class="btn_com" @click="delFn">
			<el-icon size="middle" color="red">
            <Delete />
          </el-icon>
            删除
          </div>
          </template>
        </el-table-column>
</el-table>
	</div>
	<!-- 弹出框 -->
	<el-button text @click="dialogShow">
			弹出框
</el-button>
<!-- tab标签页 -->
<el-tabs type="border-card">
	<el-tab-pane label="User">User</el-tab-pane>
	<el-tab-pane label="Config">Config</el-tab-pane>
	<el-tab-pane label="Role">Role</el-tab-pane>
	<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
<!-- 行内表单 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
	<el-form-item label="Approved by">
		<el-input v-model="formInline.user" placeholder="Approved by" clearable />
	</el-form-item>
	<el-form-item label="Activity zone">
		<el-select
			v-model="formInline.region"
			placeholder="Activity zone"
			clearable
		>
			<el-option label="Zone one" value="shanghai" />
			<el-option label="Zone two" value="beijing" />
		</el-select>
	</el-form-item>
	<el-form-item label="Activity time">
		<div >
	<div class="block">
		<el-date-picker
			v-model="formInline.value2"
			type="datetimerange"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			format="YYYY-MM-DD HH:mm:ss"
			date-format="YYYY/MM/DD ddd"
			time-format="A hh:mm:ss"
			range-separator="至"
		/>
	</div>
</div>
	</el-form-item>
	<el-form-item>
		<el-button type="primary" @click="onSubmit">Query</el-button>
	</el-form-item>
</el-form>
<el-button @click="openDemoDialog">新增</el-button>
<!-- 新增和编辑弹窗 -->
<dialogDevice ref="demoDialogRef" :dialogTitle="dialogTitle" :width="formLabelWidth">
	<template #content>
		<el-form 
			:model="form"
			ref="ruleFormRef"
			:rules="rules"
			label-width="auto"
			class="demo-ruleForm"
			status-icon
		>
		<el-form-item label="用户名"  prop="userName">
			<el-input v-model="form.userName" autocomplete="off" />
		</el-form-item>
		<el-form-item label="密码"  prop="password">
			<el-input type='password' v-model="form.password" autocomplete="off" />
		</el-form-item>
		<el-form-item label="真实姓名"  prop="name">
			<el-input v-model="form.name" autocomplete="off" />
		</el-form-item>
		<el-form-item label="所属部门"  prop="deparment">
			<el-input v-model="form.department" autocomplete="off" />
		</el-form-item>
		<el-form-item label="联系电话"  prop="phone">
			<el-input v-model="form.phone" autocomplete="off" />
		</el-form-item>
		<el-form-item label="用户角色"  prop="role">
			<el-select
				v-model="form.role"
				class="m-2"
				placeholder="Select"
				size="large"
			>
				<el-option
					v-for="item in roleOption"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
</el-select>
		</el-form-item>
		</el-form>
	</template>
	<template #footer>
        <div class="dialog-footer">
			<el-button type="primary" @click="handleSubmit(ruleFormRef)">确 认</el-button>
		<el-button @click="close(ruleFormRef)">取 消</el-button>
	</div>
	</template>
</dialogDevice>
<!-- 面包屑 -->
<SearchBox :formItemList="formItemList" @search="handleSearch" ref="SearchBoxName" @resetForm="resetForm">
</SearchBox>
<!-- 删除弹框 -->
<dialogDevice ref="delDialogRef" :dialogTitle="delDialogTitle" :width="formLabelWidth">
	<template #content>
		<span>确认要删除选中的用户信息吗？</span>
	</template>
	<template #footer>
        <div class="dialog-footer">
			<el-button type="primary" @click="delSubmit('delDialog')">确 认</el-button>
          	<el-button @click="delClose('delDialog')">取 消</el-button>
        </div>
      </template>
</dialogDevice>
<!-- 详情弹窗 -->
<dialogDevice ref="detailRef" :dialogTitle="detailTitle" :width="formLabelWidth">
	<template #content>
		<el-form 
			:model="detailForm"
			ref="ruleFormRef"
			:rules="rules"
			label-width="auto"
			class="demo-ruleForm"
			status-icon
		>
		<el-form-item label="用户名"  prop="userName">
			<el-input v-model="detailForm.userName" autocomplete="off" disabled/>
		</el-form-item>
		<el-form-item label="密码"  prop="password">
			<el-input type='password' v-model="detailForm.password" autocomplete="off" disabled/>
		</el-form-item>
		<el-form-item label="真实姓名"  prop="name">
			<el-input v-model="detailForm.name" autocomplete="off" disabled/>
		</el-form-item>
		<el-form-item label="所属部门"  prop="deparment">
			<el-input v-model="detailForm.department" autocomplete="off" disabled/>
		</el-form-item>
		<el-form-item label="联系电话"  prop="phone">
			<el-input v-model="detailForm.phone" autocomplete="off" disabled/>
		</el-form-item>
		<el-form-item label="用户角色"  prop="role">
			<el-select
				v-model="detailForm.role"
				class="m-2"
				placeholder="Select"
				size="large"
				disabled
			>
				<el-option
					v-for="item in roleOption"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</el-form-item>
		</el-form>
	</template>
	<template #footer>
        <div class="dialog-footer">
			<el-button type="primary" @click="detailSubmit(detailRef)">确 认</el-button>
		<el-button @click="deltailCancel(detailRef)">取 消</el-button>
	</div>
	</template>
</dialogDevice>

</div>
</template>

<script setup lang="ts">
import {ref,reactive,nextTick} from 'vue'
import { ElMessageBox } from 'element-plus'
// 新增和编辑弹窗
import dialogDevice from '@/components/dialog.vue'
// import commonDialog from '@/components/delDialog.vue'
import type { FormInstance, FormRules } from 'element-plus'
// 导入搜索组件
import SearchBox from '@/components/SearchBox.vue'
import { Search } from '@element-plus/icons-vue'

// 引入日期组件
const radio1 = ref('1')
// 分页器属性
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(true)
const disabled = ref(true)
const tableData = [
{ 
  userName:'小明',
  password:'123456',
	name: 'Tom',
	department: '北斗事业部',
  phone:15774128900,
  role:'管理员'
},
{ 
  userName:'晓晴',
  password:'123456',
	name: 'sili',
	department: '北斗事业部',
  phone:15774128900,
  role:'普通用户'
},
{ 
  userName:'莎莎',
  password:'123456',
	name: 'shasha',
	department: '北斗事业部',
  phone:15774128900,
  role:'管理员'
},
{ 
  userName:'改革',
  password:'123456',
	name: 'Todfm',
	department: '北斗事业部',
  phone:15774128900,
  role:'管理员'
},
]
// 表格头的颜色设置
const getRowClass = ()=>{
	return { background: "#d8e8f9", color: "#000", textAlign: "center",fontSize:'15px' };
}
// 表格各行变色
const tableRowClassName = (row:any)=>{
	console.log(row.rowIndex,'rowIndex')
	if(row.rowIndex % 2 != 0) {
        return 'evenRow';
      }
      return 'oddRow';

}
const dialogTitle = ref('')
const dialogFormVisible = ref(false)
const formLabelWidth = '500px'
const title = ref('')
const diaTtitle = ref('')
// 新增表单属性
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
type FormItem =  {
	id?:string,
	userName:string,
	name: string,
	password: string,
	department:string,
	phone:string,
	role:string
}
let form = reactive<FormItem>({
id:'',
userName:'',
name: '',
password: '',
department:'',
phone:'',
role:''
})
const roleOption = reactive([
{
	value: 'Option1',
	label: 'Option1',
},
{
	value: 'Option2',
	label: 'Option2',
}
])


// 手机号规则

const validatePhone = (rule:any, value:any, callback:any) => {
  // const reg = /^(\+[0-9]{2,}-?)?1[0-9]{10}$/;
  const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
	if (!reg.test(value)) {
    callback(new Error('手机号码格式错误'))
  } else {
    callback()
  }
}
// 密码

const validatePassword = (rule:any, value:any, callback:any) => {
  if (value.length > 16 || value.length < 6) {
    callback(new Error('密码长度为6~16位'))
  } else {
    callback()
  }
}
// 定义表单规则
const rules = reactive<FormRules<FormItem>>({
	userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
	password: [
	  { required: true, message: '请输入密码', trigger: 'blur' },
		{ validator: validatePassword, trigger: 'blur' }
	],
	name: [
    { required: true, message: '请输入真实名', trigger: 'blur' },
  ],
	department: [
    { required: true, message: '请输入部门', trigger: 'blur' },
  ],
	phone: [
	{ required: true, message: '请输入电话号码', trigger: 'blur' },
    { validator:validatePhone, trigger: 'blur' },
  ],
	role: [
    { required: true, message: '请选择角色', trigger: 'change' },
  ],
})
const dialogShow = ()=>{
	console.log('点击了按钮')
	dialogFormVisible.value  = true
}
// 编辑弹窗
const dialogEdit = (row:any)=>{
	dialogTitle.value = '编辑弹窗'
	form= {...row}
	console.log(row,'form')
	demoDialogRef.value.show();
}
// 行内表单
let formInline = reactive({
user: '',
region: '',
date: '',
value1:'',
value2:''
})

// 新增弹窗控制dialog弹窗的属性
let demoDialogRef = ref()
const openDemoDialog = () => {
dialogTitle.value = '新增弹窗'
demoDialogRef.value.show();
form = {
	userName:'',
	name: '',
	password: '',
	department:'',
	phone:'',
role:''
}
}
const handleSubmit= (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:boolean) => {
    if (valid) {
			if(form.id){
				console.log('这是编辑的保存')
			}else {
				console.log('这是新增的保存')
			}
			demoDialogRef.value.cancel()
			formEl.resetFields()
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const close = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
	demoDialogRef.value.cancel()
}
const btnShow = ref(true)
// 搜索组件相关数据
const SearchBoxName = ref()
const formItemList = ref ( [
	{
	label: "用户名",
	type: "input",
	param: "stationName",
	},
	{
	label: "所属部门",
	type: "input",
	param: "department",
	},
	{
	label: "创建时间",
	type: "daterange",
	param: "timerange",
	startPlaceholder: "开始时间",
	endPlaceholder: "结束时间",
	},
	])
	// 搜索
const handleSearch = ()=>{
		console.log(SearchBoxName.value?.formInline    
,'点击了搜索按钮')
	}
	const resetForm = ()=>{
		SearchBoxName.value?.resetForm()
	}
// 删除弹框的方法
let delDialogTitle = ref('提示')
let delDialogRef = ref()
const delFn = ()=>{
	delDialogRef.value.show()
}
const delSubmit = ()=>{
	console.log('确认删除')
	delDialogRef.value.cancel()
}
const delClose = ()=>{
	console.log('取消删除')
	delDialogRef.value.cancel()
}
// 详情相关属性
const detailRef = ref()
const detailTitle = ref('用户详情')
let detailForm = reactive<FormItem>({
	id:'',
	userName:'',
	name: '',
	password: '',
	department:'',
	phone:'',
	role:''
})
const detailShow = (row:any)=>{
	detailForm = {
		...row
	}
	detailRef.value.show()
}
const detailSubmit = ()=>{
	detailRef.value.cancel()
}
const deltailCancel = ()=>{
	detailRef.value.cancel()
}
</script>

<style lang="scss" scoped>
.bussService {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.demo-pagination-block + .demo-pagination-block {
margin-top: 10px;
}
.demo-pagination-block .demonstration {
margin-bottom: 16px;
}
.el-button--text {
margin-right: 15px;
}
.el-select {
width: 300px;
}
.el-input {
width: 300px;
}
.dialog-footer button:first-child {
margin-right: 10px;
}
// 时间控件样式
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
}
.line {
width: 1px;
background-color: red;
}
::v-deep .el-date-editor .el-range__icon{
display: none !important;
}
.dialog-footer{
    text-align: center;
  }
// 表格按钮样式
.btn_com {
  display: inline-block;
  padding:5px;
}
.line_btn{
    display: inline-block;
    width: 1px;
    height: 10px;
    line-height: 10px;
    background: darkgray;
}
// .evenRow {
// 	background-color: #e2e9f8 !important;
// }
// .oddRow {
// 	background-color: #edeef0 !important;
// }


</style>